<template>
  <div class="div1">
    <div class="div2">

      <div class="header" style="margin-bottom: 100px">
        <!--        <div class="header-top" style="">-->
        <!--          <div >-->
        <!--            <img src="/static/images/logo.png" style="margin-top: 20px;width: 400px;height: 100px" alt="" class="logo">-->
        <!--          </div>-->
        <!--        </div>-->
      </div>
      <br/>
      <!--      true 查询-->
      <div v-show="screenshotPage">
        <h2 style="color: red">提示：手机号码请务必和教务老师那里填写的手机号码一致！</h2>
        <h1 style="margin-bottom: 30px">我的明细查询</h1>
        <div class="dd" style="margin-top: 0px;">
          <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item required prop="phone" label="手机号码">
              <el-input placeholder="请输入手机号码" v-model="form.phone" style="width: 55%;float: left" ></el-input>
              <el-button @click="getVerificationCode()">发送验证码</el-button>
            </el-form-item>
            <el-form-item required prop="txtCode" label="验证码">
              <el-input placeholder="请输入手机验证码" v-model="form.txtCode"></el-input>
            </el-form-item>
            <div>
              <el-button class="a" type="primary" style="width:100%; margin-top: 20px;margin-bottom: 10px;border: none;background-color: wheat;color: black"
                         @click="onSubmit">提交
              </el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {SelectDetail,getDesignatedVerificationCode} from '@/api/WeiXin.js'
import {Loading} from 'element-ui'
export default {
  data() {
    return {
      form: {
        phone: '',
        txtCode:''
      },
      rules: {
        phone: [{required: true, message: '请输入手机号码', trigger: 'blur'}],
      },
      screenshotPage: true,
      openid:'',
      phone:'',
      detailList:[],
      mobile:'',
      name:'',
    }
  },
  methods: {
    // 获取验证码
    getVerificationCode() {
      if (this.form.phone  === 'undefined' || this.form.phone == null || this.form.phone === '' ||this.form.phone.length!==11) {
        this.$message.error('请填写手机号码')
      } else {
        let subData = 'mobile=' + this.form.phone + '&openid=' + this.openid
        getDesignatedVerificationCode(subData).then(res => {
          if (res) {
            if (res.data.retCode === 0) {
              this.mobile = res.data.data
              this.$message({
                message: '获取验证码成功,请查看短信',
                type: 'success'
              })
            } else {
              this.$message.error('获取验证码失败,请重试')
            }
          }
        })
      }
    },
    //提交
    onSubmit() {
      this.$refs.form.validate(valid => {
        // 在提交表单时执行验证逻辑
        if (valid) {
          //验证手机二维码是否正确
          if (this.mobile!==this.form.txtCode){
            // 表单验证不通过，提示错误信息
            this.$message.error('验证码错误！')
          }else {
            const loadingInstance = Loading.service({
              fullscreen: true, // 是否全屏显示
              text: '加载中请耐心等待...', // 自定义加载文本
            });
            // 表单验证通过，执行提交操作
            let subData = 'openid=' + this.openid + '&phone=' + this.form.phone
            SelectDetail(subData).then(res => {
              // 结束加载
              loadingInstance.close();
              //666代表教务系统里面和查询数据的手机号码不一致
              if (res.data.data === "666") {
                this.$message.warning("提示：手机号码和教务老师后台手机号码不一致,请联系教务老师！")
                console.log("教务系统种没有该手机号码。")
              } else {
                this.detailList = res.data.data.apply2ListS
                this.name = res.data.data.name
                this.showDetail(this.detailList,this.name);
              }
            })
          }
        } else {
          // 表单验证不通过，提示错误信息
          this.$message.error('请填写必填项')
        }
      })
    },
    //页面跳转
    showDetail(detailList,name) {
      console.log(detailList)
      // 使用 $router.push() 方法进行页面跳转，并携带参数
      this.$router.push({
        name: 'detail',
        params: {
          detailList: detailList,
          name: name,
        }
      })
    },
  },

  created() {
    // 接收二维码传过来的参数值
    function getParameterByName(name) {
      name = name.replace(/[\[\]]/g, '\\$&')  // eslint-disable-line
      var url = window.location.href
      var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)')
      var results = regex.exec(url)
      if (!results) return null
      if (!results[2]) return ''
      // 解码中文字符
      return decodeURIComponent(results[2].replace(/\+/g, ' '))
    }
    this.openid = getParameterByName("openid");
    this.phone = getParameterByName("phone");
    if (this.phone!=null){
      this.screenshotPage = false
      // 表单验证通过，执行提交操作
      let subData = 'openid=' + this.openid + '&phone=' + this.phone
      SelectDetail(subData).then(res => {
        console.log(res)
        this.detailList = res.data.data.apply2ListS
        this.name = res.data.data.name
        this.showDetail(this.detailList,this.name);
      })
    }
  }
}
</script>

<style>
/* .div1 {
  display: grid;
  align-items: center;
  justify-content: center;
} */
h1 {
  /* margin-bottom: 10px; */
  /* padding-bottom: 20px; */
}

.dd {
  width: 97%;
  display: grid;
  align-items: center;
  justify-content: center;
}

.year {
  margin-right: 14px;

}
</style>
